<template>
	<div id="orderStatistics">
		<div @click="goto('全部订单')">
			<el-progress
				type="circle"
				:color="color.total"
				:percentage="getPercent(statistics.total)"
			></el-progress>
			<p :style="{ color: color.total }">总数:{{ statistics.total }}</p>
		</div>
		<div @click="goto('已发货')">
			<el-progress
				type="circle"
				:color="color.success"
				:percentage="getPercent(statistics.success)"
			></el-progress>
			<p :style="{ color: color.success }">已发货:{{ statistics.success }}</p>
		</div>
		<div @click="goto('待发货')">
			<el-progress
				type="circle"
				:color="color.warning"
				:percentage="getPercent(statistics.warning)"
			></el-progress>
			<p :style="{ color: color.warning }">待发货:{{ statistics.warning }}</p>
		</div>
		<div @click="goto('已取消')">
			<el-progress
				type="circle"
				:color="color.canceled"
				:percentage="getPercent(statistics.canceled)"
			></el-progress>
			<p :style="{ color: color.canceled }">已取消:{{ statistics.canceled }}</p>
		</div>
	</div>
</template>

<script>
import axios from "axios";
export default {
	data() {
		return {
			activeName: "first",
			color: {
				total: "#3498DB",
				success: "#58D68D",
				warning: "#F4D03F",
				canceled: "#E74C3C"
			},
			statistics: {
				total: 0,
				success: 0,
				warning: 0,
				canceled: 0
			}
		};
	},
	mounted() {
		axios.get("/orderStatistics").then(res => {
			this.statistics = res.data;
		});
	},
	methods: {
		getPercent(num) {
			return (num * 100) / this.statistics.total;
		},
		goto(str) {
			this.$router.push({
				path: "/orderformUsersList",
				query: { current: str }
			});
		}
	}
};
</script>

<style>
#orderStatistics {
	margin: 0 auto;
	width: fit-content;
	display: flex;
}
#orderStatistics > div {
	margin: 0 10px;
	padding: 20px;
	border: 1px solid lightgray;
	border-radius: 10px;
}
#orderStatistics > div > p {
	margin: 10px 0 0;
	font-weight: 600;
}
</style>
